<script>
export default {
  name: 'ClueData',
  data() {
    return {
      clueDetail: {},
      clueId: null,
      type: null
    }
  },
  created() {
    // 获取传递的线索ID
    this.clueId = this.$route.query.id


    // 根据ID获取详情数据
    if (this.clueId) {
      this.getClueDetail(this.clueId)
    }
  },
  methods: {
    // 获取线索详情
    async getClueDetail(id) {
      try {
        // 这里替换为你的实际API调用
        // const response = await this.$axios.get(`/api/clue/detail/${id}`)
        // this.clueDetail = response.data
        console.log('获取线索详情，ID:', id)
        // 模拟数据
        this.clueDetail = {
          id: id,
          name: '张三',
          phone: '13800138000',
          channel: '线上',
          createTime: '2023-05-18 11:35',
          owner: '李四',
          status: '已分配'
        }
      } catch (error) {
        console.error('获取线索详情失败:', error)
        this.$message.error('获取线索详情失败')
      }
    }
  }
}
</script>

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>线索详情</span>
      </div>

      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="线索ID：">
              <span>{{ clueDetail.id || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名：">
              <span>{{ clueDetail.name || '无' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号：">
              <span>{{ clueDetail.phone || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="渠道来源：">
              <span>{{ clueDetail.channel || '无' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间：">
              <span>{{ clueDetail.createTime || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属人：">
              <span>{{ clueDetail.owner || '无' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态：">
              <span>{{ clueDetail.status || '无' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.box-card {
  margin: 20px;
}
</style>
